<template>
  <div>
    <table class="table table-bordered mb-1 mt-3" :class="isViewMode ? 'report-finish' : ''">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">信贷八有指标</td>
        </tr>
        <tr>
          <td class="report-input-td" :class="isViewMode ? 'td-text-left' : ''" colspan="10">
            <div class="p-2">
              <span v-if="isViewMode">{{ creditTypeStr || '-' }}</span>
              <div class="d-flex" v-else>
                <el-checkbox-group v-model="creditTypeList" @change="SaveData">
                  <el-checkbox v-for="(type, key) in enumLoadProduct" :key="key" :label="key">
                    {{ type }}
                  </el-checkbox>
                </el-checkbox-group>
                <el-checkbox v-model="checked" @change="selectCreditType" class="mx-3">
                  全选
                </el-checkbox>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { enumLoadProduct } from '@/credit/plugins/enum'
// import { putFarm } from '@/common/api/industrial'
export default {
  components: {},
  props: {
    queryId: {
      type: String,
      default: '',
    },
    related: {
      type: Object,
      default: () => {},
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      enumLoadProduct,
      creditTypeList: [],
      checked: false,
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
    creditTypeStr() {
      let res = []
      this.creditTypeList.forEach(key => {
        res.push(this.enumLoadProduct[key])
      })
      return res.join('，')
    },
  },
  watch: {
    related: {
      handler: function () {
        const typeList = this.related.credit_type_list
        this.creditTypeList = typeList ? typeList.split(',') : []
        this.checked = +this.creditTypeList.length === 8
      },
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    selectCreditType(val) {
      this.creditTypeList = val ? Object.keys(this.enumLoadProduct) : []
      this.SaveData()
    },
    SaveData() {
      const data = {
        credit_type_list: this.creditTypeList.join(','),
      }
      this.$api
        .updateData(this.$serviceName, 'customer_related', this.queryId, data)
        .catch(err => {
          this.$message.err(`保存八有指标失败${err}`)
        })
        .finally(() => {
          this.$emit('save', true)
        })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/gov/components/creditFile/style.scss';
</style>
